<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <swiper-slide :key="item.id" v-for="item of swiperList">
        <img :src="item.imgUrl" class="swiper-img"/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'HomeSwiper',
    props: {
      swiperList: Array
    },
    data () {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
          autoplay: 2000,
          // 循环轮播
          loop: true
        },
      }
    },
    computed: {
      showSwiper () {
        console.log('this.swiperList.length', this.swiperList.length)
        return this.swiperList.length
      }
    }

  }
</script>
<!-- 后面的scoped是必须的，表示它只对当前组件有效，不会影响到其他组件的样式 -->
<style lang="stylus" scoped>

  /* 样式穿透，强制把轮播图的小圆点的背景图改成白色 */
  .wrapper >>> .swiper-pagination-bullet-active
    background: #fff !important

  .wrapper
    width: 100%
    height: 26.77vw
    background: #eee

    .swiper-img
      width: 100%

</style>
